<div class="container-fluid product-wrapper pt-4">
  <div class="row">
    <div class="col-md-3">
      <!-- 筛选栏 -->
      <div class="card">
        <div class="card-header"><h6>筛选条件</h6></div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label">分类</label>
            <select class="form-select" id="filter-category">
              <option value="">全部</option>
              <option value="clothes">蔬菜</option>
              <option value="fruit">水果</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">价格排序</label>
            <select class="form-select" id="filter-price">
              <option value="">默认</option>
              <option value="asc">价格从低到高</option>
              <option value="desc">价格从高到低</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-9">
      <!-- 搜索栏 -->
      <div class="input-group mb-3">
        <input
          type="text"
          class="form-control"
          placeholder="搜索商品..."
          id="search-input"
        />
        <button class="btn btn-outline-primary" type="button" id="search-btn">
          搜索
        </button>
      </div>

      <!-- 商品展示区 -->
      <div class="row" id="product-list">
        <!-- JS 中动态渲染商品卡片 -->
      </div>
    </div>
  </div>
</div>
